<template>
  <div style="font-weight: 800;">
    <p style="line-height: 26px;text-align: center;">{{ title }}</p>
    <ul class="password">
      <li v-for="i in 6" :key="i"><span v-show="password[i - 1] !== undefined">*</span></li>
    </ul>
    <div class="w">
      <ul>
        <li v-for="(i, index) in initArr" :key="i" @click="enterNum(i)" :class="{rightLi: index + 1 % 3 === 0}">
          <span v-if="i < 10">{{ i }}</span>
          <span v-if="i === 11">{{ initArr[11] }}</span>
          <span v-if="index === 11">⬅</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'keyboard',
  data () {
    return {
      password: [],
      initArr: [],
      result: [],
      title: '请输入密码',
      type: ''
    }
  },
  methods: {
    enterNum (i) {
      if (i === 12) {
        this.password.splice(this.password.length - 1, 1)
      } else if (i !== null && i !== 10) {
        this.password.push(i)
      }
      if (this.password.length === 6) {
        this.resultHandler()
      }
    },
    resultHandler () {
      if (this.once === 'pay') {
        this.$emit('draw', this.password.join(''))
        this.password = []
        return
      }
      this.result.push(this.password.join(''))
      this.password = []
      if (this.result.length === 1) {
        this.$emit('check', this.result[0])
      } else if (this.type === 'set') {
        if (this.result.length === 2) {
          if (this.result[0] === this.result[1]) {
            this.$emit('set', this.result)
          } else {
            this.result = []
            this.title = '两次密码输入不一致，请重新输入'
          }
        }
      } else if (this.type === 'update') {
        if (this.result.length === 2) {
          this.title = '请再次输入密码'
        }
        if (this.result.length === 3) {
          if (this.result[1] === this.result[2]) {
            this.$emit('update', this.result)
          } else {
            this.result = [this.result[0]]
            this.title = '两次密码输入不一致，请重新输入'
          }
        }
      }
    },
    callbackPassword (errorCode) {
      this.password = []
      if (errorCode === null || errorCode === 10002) {
        this.type = 'update'
        errorCode === 10002 && (this.result = [])
        errorCode === 10002 && (this.title = '输入密码错误')
        errorCode === null && (this.title = '请输入新密码')
      } else {
        this.type = 'set'
        this.title = '请再次输入密码'
      }
    },
    emptyData () {
      this.result = []
      this.password = []
      this.title = '请输入密码'
    }
  },
  props: ['once'],
  created () {
    let temp = []
    for (let i = 0; i < 10; i++) {
      temp.push(i)
    }
    for (let i = 0; i < 10; i++) {
      let j = Math.floor(Math.random() * temp.length)
      this.initArr.push(temp[j])
      temp.splice(j, 1)
    }
    this.initArr.push(12)
    this.initArr.splice(this.initArr.length - 2, 0, null)
  }
}
</script>

<style scoped>
  .w{
    overflow: hidden;
    border-bottom: 1px solid #dddee1;
    border-left: 1px solid #dddee1;
  }
  .w li{
    list-style: none;
    height: 50px;
    float: left;
    width: 33.333%;
    text-align: center;
    line-height: 50px;
    box-sizing: border-box;
    border-top: 1px solid #dddee1;
    border-right: 1px solid #dddee1;
  }
  .password{
    overflow: hidden;
    border-left: 1px solid #dddee1;
    border-bottom: 1px solid #dddee1;
    border-top: 1px solid #dddee1;
    width: 241px;
    box-sizing: border-box;
    margin: 0 auto 10px;
    font-size: 18px;
  }
  .password li{
    list-style: none;
    float: left;
    width: 40px;
    height: 40px;
    border-right: 1px solid #dddee1;
    text-align: center;
    line-height: 40px;
    box-sizing: border-box;
  }
  li.rightLi{
    border-right: none;
  }
</style>
